<gm:page title="WherePhoto" authenticate="false" onload="switchMap()">
   <table width="100%">
     <tr>
       <td width="300" valign="top">
         <gm:list id="list" template="photoList" height="400" data="http://picasaweb.google.com/data/feed/base/user/sandeep.sibal/albumid/5111974857875411249?kind=photo&alt=atom&authkey=0z2siOAe-Fs&hl=en_US" pagesize="100">
           <gm:handleEvent src="map" event="select"/>
         </gm:list>
       </td>
      <td>
         <gm:map id="map" height="400" data="${list}">
           <gm:handleEvent src="list" event="select"/>           
           <gm:handleEvent event="select" execute="onMapSelect(event.entry)"/>           
         </gm:map>
       </td>
       <td width="300">
         <gm:item template="photo">
           <gm:handleEvent src="list" event="select"/>
         </gm:item>
       </td>
     </tr>
  </table>
 
  <gm:template id="photoList">
     <div repeat="true" style="padding: 5px">
        <gm:image ref="media:group/media:thumbnail/@url" height="54" width="54" mode="fill" style="float: left"/>
        <gm:text ref="atom:title"/>
        <br style="clear: both"/>
     </div>
  </gm:template>

  <gm:template id="photo">    
    <gm:image ref="media:group/media:thumbnail[@width='288']/@url"/>
    <gm:image ref="media:group/media:thumbnail[@height='288']/@url"/>
  </gm:template>
  
  <script type="text/javascript">
    function switchMap() {
      var map = google.mashups.getObjectById("map").getMap();
      map.setMapType(map.getMapTypes()[2]); // Hybrid view is the third type supported by the Maps API
    }
    
    function onMapSelect(entry) {
      if (entry) {
        var latLng = new GPath("georss:where/gml:Point/gml:pos").getValue(entry); // Get the entry's lat-long value
        if (latLng) {
          var map = google.mashups.getObjectById("map").getMap();
          map.setZoom(8); // Zoom in
          latLng = latLng.split(" "); // Split out the space-separated latitude and longitude values
          map.setCenter(new GLatLng(latLng[0], latLng[1])); // Re-center the map
        }
      } else {
       google.mashups.getObjectById("map").showAllMarkers(); // If no entry selected, zoom out
      }
    }
  </script>
    
</gm:page>

